<template>
  <common-echarts :option="option" ref="echarts" :height="600"></common-echarts>
</template>

<script>
import CommonEcharts from "./echarts.vue";

export default {
  name: "TreeEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          name: "tree1",
          type: "tree",
          top: "5%",
          left: "7%",
          symbolSize: 20, // 节点的大小
          label: {
            position: "top", // 非叶子节点的标签在上部
            align: "left", // 左对齐
          },
          leaves: {
            label: {
              position: "right", // 叶子节点的标签在节点右边
              align: "left",
            },
          },
          data: [
            {
              name: "A",
              children: [
                { name: "A1", children: [{ name: "A11" }, { name: "A12", value: 1122 }] },
                {
                  name: "A2",
                  children: [
                    { name: "A21", value: 2222 },
                    { name: "A22", value: 2233 },
                  ],
                },
              ],
            },
          ],
        },
        {
          name: "tree2",
          type: "tree",
          top: "35%",
          left: "7%",
          symbolSize: 20, // 节点的大小
          label: {
            position: "top", // 非叶子节点的标签在上部
            align: "left", // 左对齐
          },
          leaves: {
            label: {
              position: "right", // 叶子节点的标签在节点右边
              align: "left",
            },
          },
          data: [
            {
              name: "A0",
              children: [
                {
                  name: "A01",
                  children: [{ name: "A11" }, { name: "A12", value: 1122 }],
                },
                {
                  name: "A02",
                  children: [
                    { name: "A21", value: 2222 },
                    { name: "A22", value: 2233 },
                  ],
                },
              ],
            },
          ],
        },
      ];

      return {
        title: {
          text: "数据层次化图",
          subtext: "利用包含关系表达数据层次化",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br />{b}: {c}",
        },
        legend: {
          top: "2%", // 图例距离上部百分比
          left: "3%", // 图例距离左端百分比
          // 图例的图表形状为矩形
          data: [{ name: "tree1", icon: "rectangle" }, { name: "tree2" }],
        },
        series: series,
      };
    },
  },
  data() {
    return {};
  },
  methods: {
    refresh() {
      console.log("option:", this.option);
      this.$nextTick(this.$refs.echarts.refresh);
    },
  },
};
</script>
